<!doctype html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">

    <title>课堂-分组</title>

    <link rel="stylesheet" href="../../../static/css/vendor/ion-fonts.css">
    <link rel="stylesheet" href="../../../static/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="../../../static/css/style.css">
    <link href="../../../static/test/ziy/memberV3.css" rel="stylesheet" type="text/css">
    <link href="../../../static/test/ziy/common.css" rel="stylesheet" type="text/css">
    <link href="../../../static/test/ziy/previewfile.css" rel="stylesheet" type="text/css">
    <link href="../../../static/test/ziy/group.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../../../static/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../static/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="../../../static/test/ziy/iconfont.css">
    <script src="../../../static/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="../../../static/js/vendor/bootstrap.min.js"></script>
<body>
<!----------------------------------------------------模态框 start--------------------------------------------------------------->
<!--分组设置模态框-->
<div class="modal" tabindex="-1" role="dialog" id="groupset">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑活动分组</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">组名</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                               placeholder="">

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-dark">保存</button>
            </div>
        </div>
    </div>
</div>
<!----------------------------------------------------模态框  end---------------------------------------------------------------->
<div class="main-wrapper">

    <header class="header-main_area">
        <div class="header-top_area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="ht-left_area in-header return" style="height: 45px;">
                            <a class="return" style="top: 5px;" href="../index.html" th:href="@{'/course/index/'+${session.course.id}}">
                                    <span style="background:#fed100;color:#333333;">
                                        <i class="iconfont iconfanhui" style="color: black;"></i>
                                        <strong th:text="${session.course.name}">课堂名称</strong>
                                    </span>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="ht-right_area">
                            <div class="ht-menu">
                                <ul>
                                    <li><a href="#"></a></li>
                                    <li><a href=""></a></li>
                                    <li><a href="/user/personal"><i class="ion-person"></i>个人中心</a></li>
                                    <li><a href="/doLogout"><i class="ion-log-out"></i>退出用户</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

</div>

<div class="in-header"
     style="box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.04);background: none repeat scroll 0% 0% #fff;">

    <div class="nav gWidth row" id="third-nav" style="box-shadow: none">

        <div class="col-lg-12">
            <a href="../member/member.html" th:href="@{'/member/list/'}">成员</a>
            <a href="../group/group.html" th:href="@{'/group/list/'}" class="active">学生分组</a>
            <a href="../score/score.html" th:href="@{'/score/list/'}">成绩</a>
        </div>

    </div>
</div>

<div class="groupmain hidden" mytype="teacher">

    <div>
        <div class="grouptag">任务分组
            <div class="addnewgroups">
                新建任务分组
            </div>
        </div>
    </div>
    <div class="grouplists" id="groupdone">


        <div class="groupactivity">
            <div class="headinfoline">

                <span class="grouptype colorb">自由分组</span>

                <div class="activityopts">
                    <div class="activityoptsbox"></div>
                    <ul class="activityoptul ihide">
                        <li class="activityoptli delthisactivity">删除分组</li>
                    </ul>
                </div>
                <span class="grouptime">19/08/27   22:00</span>
            </div>
            <div class="activityname hidesingleline">8月27日活动分组</div>
            <div class="activitydetail">

                <div class="setgroupnow colorb">自由分组中..</div>

            </div>
        </div>


        <div class="groupactivity">
            <div class="headinfoline">

                <span class="grouptype colorb">自由分组</span>

                <div class="activityopts">
                    <div class="activityoptsbox"></div>
                    <ul class="activityoptul ihide">
                        <li class="activityoptli delthisactivity">删除分组</li>
                    </ul>
                </div>
                <span class="grouptime">19/08/27   22:01</span>
            </div>
            <div class="activityname hidesingleline">8月27日活动分组</div>
            <div class="activitydetail">

                <div class="setgroupnow colorb">自由分组中..</div>

            </div>
        </div>


        <div class="cf"></div>
    </div>
</div>


<!--------------------------打开分组------------------------------>
<div class="singlegroup" style="">
    <div class="sghead">
        <div class="sgtitle">
            <h2 class="activename">活动分组</h2>

        </div>
        <div class="sgheadinfo">
            <div class="sgheadnum">
                <span class="totalgroups" th:text="${groupsSize}">0</span>
                <span class="noenterpeople" th:text="${cnt}">0</span>
            </div>
            <div class="sgheadsetting">
                <!--                    <a href="javascript:;" class="downloadgroup">下载分组名单</a>-->
                <!--                    <div class="allowstuselect">-->
                <!--                        <span>允许学生选组</span>-->
                <!--                        <div id="allowswitch" class="myswitch myswitchon" switch="on"><div class="inmyswitch" style="height: 18px; width: 18px; right: 21px;"></div></div>-->
                <!--                    </div>-->
                <div class="activesetting" groupnumslimit="0" groupstudentlimit="0" isallowcreate="1" >分组设置</div>
                <div class="inactivityopts">
                    <ul class="inactivityoptul">
                        <li class="inactivityoptli indelthisactivity">删除分组</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="sgbody">
        <div class="sgbodyl">
            <div class="addnewgroup" onclick="add()">新建小组</div>
            <ul class="grouplist">
                <li data-me="0" th:each="group, groupStat : ${groups}"
                    th:class="${groupStat.first}?'groupli active':'groupli'">
                    <div class="grouplitext" title="第一组">
                        <span style="color:#333;" th:text="${group.name}">第一组 </span><span> (<font th:text="${group.number}">1</font>人)</span>
                    </div>
                    <div class="ctrlopt">
                        <ul class="ctrloptul">
                            <li class="ctrloptli delthisgroup">删除小组</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="sgbodyr">
            <div class="grouplis" th:each="group, groupStat : ${groups}"
                 th:class="${groupStat.first}? 'grouplis':'grouplis hide'">
                <div class="sgroupname" th:text="${group.name}">第一组</div>
                <div class="sgroupsetting">
                    <div class="groupnumcount" th:text="'共'+${group.number}+'人'">共1人</div>
                    <div class="sgroupset" data-limit="0" th:onclick="'javascript:edit(\''+${group.id}+'\');'">小组设置</div>
                    <div class="addgroupmember">添加组员</div>
                </div>
                <ul class="sgroupul">
                    <li>
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <td>学号</td>
                                <td>学生名</td>
                                <td>邮箱</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>

                            <tr th:each="student : ${group.students}">
                                <td th:text="${student.studentNo}">学号</td>
                                <td th:text="${student.userName}">姓名</td>
                                <td th:text="${student.email}">邮箱</td>
                                <td>
                                    <button type="button" class="btn btn-dark btn-sm">移除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--添加成员 弹框-->
    <div class="lxr-box hide">
        <div class="all-box fl">
            <div class="search-box">
                <i></i>
                <input type="text" placeholder="搜索名称、学号">
            </div>
            <div class="choose-div">
                <div class="search-result" style="top: 0px;">
                    <div style="height: 30px;line-height:30px;padding-right:20px;">
                        <p class="tips" style="float: left;">可选下列学生作为管理员</p>
                        <!--                        <div class="selectall"><span class="selectalltip">全选</span><i class="selectalli"></i></div>-->
                    </div>
                    <div class="res-list">
                        <p class="selectp pselected">
                            <span>王思铭(17210320319)</span>
                            <i class="checked"></i>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="end-box fl">
            <div class="title">
                <h2 class="fl">已选择<span>0</span></h2>
                <a href="javascript:;" class="cancel"></a>
            </div>
            <div class="end-div">
                <div class="end-list">
                    <p>
                        <span>王思铭(17210320319)</span>
                        <a href="javascript:;" class="cancel"></a>
                    </p>
                </div>
            </div>
            <div class="btn-box">
                <a href="javascript:;" class="close">取消</a>
                <a href="javascript:;" class="sure">确定</a>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        //分组设置模态框
        $('.activesetting').click(function () {

            $("#groupset").modal({
                backdrop: "static"

            });
        })

        //分组切换
        $(function () {
            $('.grouplist li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var index = $(this).index();
                $(".grouplis").eq(index).show().siblings().hide();
            })
        })
        //添加成员
        $(document).on("click", ".addgroupmember", function () {
            //style="display: block;"

            $('.lxr-box').attr('style','display:block;');
            $('.lxr-box').find(".close,.title .cancel").on("click", function () {

                $('.lxr-box').removeAttr('style');

            })
        })


    </script>

    <script src="../../../static/js/modules/layer.js"></script>

    <!--<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>-->
    <script src="../../../static/js/layui.js"></script>
    <script src="../../../static/js/appjs/group/group.js"></script>
</div>
</body>

</html>

